<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />

	</head>


	<body >
	
		<div class="mui-content">


			<div class="mui-input-row" style="margin-top: 5vh; ">
				<label style="color: #000000;font-weight:800;margin-top: -2px;">文件</label>
				<input type="file" placeholder="普通输入框" style="color: blue;">
			</div>

			<div id="rongqi">

			</div>
        </div>
			
      
            <script src="js/mui.min.js"></script>
            <script type="text/javascript">
            	mui.init()
            </script>
			<script>
				document.querySelector('input').onchange = function() {

					var file = this.files[0];
					var reader = new FileReader();

					var textType = /text.*/;
					var imgType = /image.*/;
					var videoType = /video.*/;
					var audioType = /audio.*/;


					if (file.type.match(textType)) {

						reader.readAsText(file, "GBK");

						reader.onload = function(e) {
							var text = reader.result;
							document.getElementById('rongqi').innerHTML = text;
						}

					} else if (file.type.match(imgType)) {
						reader.readAsDataURL(file);
						reader.onload = function(e) {
							var tupian = reader.result;
							var img = '<img src= " ' + tupian + '"   style="margin-top:7vh;width:100%;"  >';
							document.getElementById('rongqi').innerHTML = img;

						}

					} else if (file.type.match(videoType) || file.type.match(audioType)) {

						if (file.type.match(videoType)) {

							reader.readAsDataURL(file);
							reader.onload = function(e) {
								var yinshipin = reader.result;
								var video = '<video src="' + yinshipin + '" controls="controls"   style="margin-left:10vw;width:80vw;margin-right:10vw;"> </video>'
								document.getElementById('rongqi').innerHTML = video;

							}

						} else {

							reader.readAsDataURL(file);
							reader.onload = function(e) {
								var yinshipin = reader.result;
								var audio = '<audio src="' + yinshipin + '" controls="controls" > </audio>';
								document.getElementById('rongqi').innerHTML = audio;
							}
						}
					}else{
						
						var txt ='<div style="margin-left:20vw;margin-top:5vh">'+'暂不支持该数据的读取'+'</div>';
						document.getElementById('rongqi').innerHTML = txt;
						
					}



				};
			</script>

	</body>

</html>
